<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>访问控制-调用方测站管理</title>

    <meta http-equiv="x-ua-compatible" content="ie=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>


    <meta name="renderer" content="webkit"/>

    <!--toast-->
    <link href="../metronic/assets/global/plugins/jquery.toast.css " rel="stylesheet"/>
    <script src="../metronic/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
    <script src="../metronic/assets/global/plugins/jquery.toast.min.js" type="text/javascript"></script>

    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <link
            href="../metronic/assets/global/plugins/font-awesome/css/font-awesome.min.css"
            rel="stylesheet" type="text/css"/>
    <link
            href="../metronic/assets/global/plugins/simple-line-icons/simple-line-icons.min.css"
            rel="stylesheet" type="text/css"/>
    <link
            href="../metronic/assets/global/plugins/bootstrap/css/bootstrap.min.css"
            rel="stylesheet" type="text/css"/>
    <link
            href="../metronic/assets/global/plugins/uniform/css/uniform.default.css"
            rel="stylesheet" type="text/css"/>
    <link
            href="../metronic/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css"
            rel="stylesheet" type="text/css"/>
    <!-- END GLOBAL MANDATORY STYLES -->
    <!-- BEGIN PAGE LEVEL STYLES -->
    <link rel="stylesheet" type="text/css"
          href="../metronic/assets/global/plugins/select2/select2.css"/>
    <link rel="stylesheet" type="text/css"
          href="../metronic/assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css"/>
    <!-- END PAGE LEVEL STYLES -->
    <!-- BEGIN THEME STYLES -->
    <link href="../metronic/assets/global/css/components.css"
          id="style_components" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css"
          href="../metronic/assets/global/plugins/bootstrap/css/bootstrap-table.css"/>
    <!-- END THEME STYLES -->
    <style type="text/css">
        .control-label {
            line-height: 34px;
            text-align: right;
        }

        .no-padding-right {
            padding-right: 0px !important
        }

        .help-inline {
            color: red;
        }

        .table {
            border-top: solid 3px #F3565D;
        }

        .table-toolbar {
            margin-bottom: 0px;
        }
        
        [v-cloak]{
            display:none;
        }
    </style>
</head>

<body class="page-header-fixed page-quick-sidebar-over-content "
      style="width: 98%; background: #0f0; background-color: transparent;">
<div id="main-container" style="margin-top:16px;" v-cloak>
    <!--Begin Right Content-->
    <div class="col-md-12">
        <div class="portlet box blue-steel">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-globe"></i>调用方分组管理
                </div>
                <div class="actions">
                    <a @click="backBtn" class="btn btn-default btn-sm" href="javascript:;"
                       id="btn_back"> <i class="fa fa-backward"></i>
                        返回
                    </a>
                </div>
            </div>
            <div class="portlet-body">
                <div style="text-align: right">
                    <button type="button" @click='openGroup()' class="btn btn-primary"><i
                            class="fa fa-plus"></i> 新增
                    </button>
                </div>
                <p/>
                <div>
                    <table class="portlet-body table table-hover table-bordered table-striped">
                        <thead>
                        <tr>
                            <th style="text-align: center; width: 50px; vertical-align: middle; ">
                                序号
                            </th>
                            <th style="text-align: center; width: 150px; vertical-align: middle; ">
                                分组名称
                            </th>
                            <th style="text-align: center; vertical-align: middle; ">
                                分组说明
                            </th>
                            <th style="text-align: center; vertical-align: middle; ">
                                测站数量
                            </th>
                            <th style="text-align: center; vertical-align: middle; ">
                                操作人
                            </th>
                            <th style="text-align: center; vertical-align: middle; ">
                                操作时间
                            </th>
                            <th style="text-align: center; vertical-align: middle; width: 200px">
                                操作
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in catalogInfoList">
                            <td style="text-align: center; vertical-align: middle; ">
                                {{index+1}}
                            </td>
                            <td style="text-align: center; vertical-align: middle; ">
                                {{item.catalogName}}
                            </td>
                            <td style="text-align: center; vertical-align: middle; ">
                                {{item.remark}}
                            </td>

                            <td style="text-align: center; vertical-align: middle; ">
                                {{item.stationNum}}
                            </td>
                            <td style="text-align: center; vertical-align: middle; ">
                                {{item.createdUser}}
                            </td>
                            <td style="text-align: center; vertical-align: middle; ">
                                {{item.createdTime}}
                            </td>
                            <td style="text-align: center; vertical-align: middle; ">
                                <a href='javascript:;' title='编辑分组'
                                   @click='openGroup(item)'
                                   class='btn btn-default btn-sm'>
                                    <i class='fa fa-edit'></i>
                                </a>
                                <a href='javascript:;' title='删除分组'
                                   @click='delGroup(item)'
                                   class='btn btn-default btn-sm'>
                                    <i class='glyphicon glyphicon-trash'></i>
                                </a>
                            </td>
                        </tr>
                        <tr v-if="catalogInfoList.length == 0">
                            <td style="text-align: center; vertical-align: middle; " colspan="9">
                                暂无数据
                            </td>
                        </tr>

                        </tbody>
                    </table>
                </div>


            </div>
        </div>
    </div>

    <div id="groupInfoContent" class="modal fade" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog" style="width: 90%;height: 90%;margin: 30px auto;">
            <div class="modal-content" style="height: 100%;">
                <div class="modal-header" style="height: 10%">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">调用方分组管理</h4>
                </div>
                <div class="modal-body" style="height: 78%;">
                    <iframe id="myIframe" style="border: 0px; height: 100%;width: 100%"></iframe>
                </div>
                <div class="modal-footer" style="height: 12%;">
                    <button type="button" data-dismiss="modal" class="btn default">关闭</button>
                    <button @click="saveGroupInfo()" type="button" class="btn blue-steel">保存</button>
                </div>
            </div>
        </div>
    </div>


    <!--    <div id="groupInfoContent" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true">-->
    <!--        <div class="modal-dialog modal-lg" role="document">-->
    <!--            <div class="modal-content">-->
    <!--                <div class="modal-header">-->
    <!--                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>-->
    <!--                    <h4 class="modal-title">调用方分组管理</h4>-->
    <!--                </div>-->
    <!--                <div class="modal-body" style="height: 80%;">-->
    <!--                    <iframe id="myIframe" style="border: 0px; height: 100%;width: 100%"></iframe>-->
    <!--                </div>-->
    <!--                <div class="modal-footer">-->
    <!--                    <button type="button" data-dismiss="modal" class="btn default">关闭</button>-->
    <!--                    <button @click="saveGroupInfo()" type="button" class="btn blue-steel">保存</button>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
</div>


<!--<script src="../metronic/assets/global/plugins/jquery.min.js"-->
<!--type="text/javascript"></script>-->
<script src="../metronic/assets/global/plugins/jquery-migrate.min.js"
        type="text/javascript"></script>
<!-- IMPORTANT! Load jquery-ui.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
<script src="../metronic/assets/global/plugins/jquery-ui/jquery-ui.min.js"
        type="text/javascript"></script>
<script
        src="../metronic/assets/global/plugins/bootstrap/js/bootstrap.min.js"
        type="text/javascript"></script>
<script
        src="../metronic/assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js"
        type="text/javascript"></script>
<script
        src="../metronic/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js"
        type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/jquery.blockui.min.js"
        type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/jquery.cokie.min.js"
        type="text/javascript"></script>
<script
        src="../metronic/assets/global/plugins/uniform/jquery.uniform.min.js"
        type="text/javascript"></script>
<script
        src="../metronic/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js"
        type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="../metronic/assets/global/scripts/metronic.js"
        type="text/javascript"></script>
<script
        src="../metronic/assets/global/plugins/bootstrap/js/bootstrap-table.js"
        type="text/javascript"></script>
<script
        src="../metronic/assets/global/plugins/bootstrap/js/bootstrap-table-zh-CN.js"
        type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootbox/bootbox.min.js"
        type="text/javascript"></script>

<!-- END PAGE LEVEL SCRIPTS -->
<!-- VUE -->
<script src="../metronic/assets/vue/vue.global.js"
        type="text/javascript"></script>
<script src="../metronic/assets/vue/vue@2.js" type="text/javascript"></script>
<script src="../metronic/custom/commDialogs.js" type="text/javascript"></script>
<script src="../js/accessControl/applicationGroup.js" type="text/javascript"></script>
<!--acStationInfoAdd.html-->
</body>
</html>
